<!DOCTYPE html>
<html>
<head>
    <title>任务列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .task {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 5px;
            position: relative;
        }
        .task.completed {
            background-color: #f0f0f0;
        }
        .task h3 {
            margin-top: 0;
        }
        .btn {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            margin-right: 5px;
            font-size: 14px;
        }
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        .btn-warning {
            background-color: #ffc107;
            color: black;
        }
        .btn-danger {
            background-color: #dc3545;
            color: white;
        }
        .btn-success {
            background-color: #28a745;
            color: white;
        }
        .actions {
            margin-top: 10px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>任务列表</h1>
        <a href="{% url 'task_create' %}" class="btn btn-primary">新建任务</a>
    </div>
    
    {% for task in tasks %}
    <div class="task {% if task.completed %}completed{% endif %}">
        <h3>{{ task.title }}</h3>
        <p>{{ task.description }}</p>
        <small>创建时间: {{ task.created_at }}</small>
        <div class="actions">
            <a href="{% url 'task_edit' task.pk %}" class="btn btn-warning">编辑</a>
            <a href="{% url 'task_delete' task.pk %}" class="btn btn-danger">删除</a>
            <a href="{% url 'task_toggle' task.pk %}" class="btn btn-success">
                {% if task.completed %}标记为未完成{% else %}标记为已完成{% endif %}
            </a>
        </div>
    </div>
    {% empty %}
    <p>暂无任务</p>
    {% endfor %}
</body>
</html> 